import React, { Component } from 'react'
import { Button, Row, Col, Input, Checkbox, Pagination, } from 'antd';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { Carousel } from 'antd';
import './HomeManage.scss';

const { Search } = Input;

// 引入轮播图的样式
const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};


export default class HomeManage extends Component {
  state = {

  }

  render() {
    return (
      <div >
        {/* 头部搜索区域 */}
        <div>
          <Row>
            <Col span={16}>
              <Button type="primary" size={'medium'} >卡片
              </Button>
              <Button type="primary" size={'medium'} >列表
              </Button>
            </Col>
            <Col span={2}>
              <Button type="primary" size={'medium'} >新增
              </Button>
            </Col>
            <Col span={4}>
              <Search placeholder="民宿名称" enterButton />
            </Col>
          </Row>
        </div>
        {/* 民宿卡片区域 */}
        <div className="card">
          <Row>
            <Col span={5} className="homecard">
              <div className="card-title">
                <p>张三的民宿</p>
              </div>
              <div>
                <Carousel autoplay>
                  <div>
                    <h3 style={contentStyle}>1</h3>
                  </div>
                  <div>
                    <h3 style={contentStyle}>2</h3>
                  </div>
                  <div>
                    <h3 style={contentStyle}>3</h3>
                  </div>
                </Carousel>
              </div>
              <div id="rent_table">
                <table>
                  <tbody>
                    <tr>
                      <td>地方区域：</td>
                      <td>广东省广州市白云区</td>
                    </tr>
                    <tr>
                      <td>租金：</td>
                      <td>200</td>
                    </tr>
                    <tr>
                      <td>押金：</td>
                      <td>100</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div>
                <Checkbox></Checkbox>
                <div className="btn">
                  <Button type="primary" icon={<FormOutlined />} ></Button>
                  <Button type="danger" icon={<DeleteOutlined />}></Button>
                </div>
              </div>
            </Col>
          </Row>
        </div>
        {/* 分页区域 */}
        <Row>
          <Col span={14} offset={6}>
            <Pagination
              total={85}
              showSizeChanger
              showQuickJumper
              showTotal={total => `Total ${total} items`}
            />
          </Col>
        </Row>

      </div>
    )
  }
}
